<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <script src="ianime028.js" type="text/javascript"></script>
  <script type="text/javascript">
var anime = new iAnime();
var iconSize = 40;
var rows = 8;
var cols = 8
var cells = [[],[],[],[],[],[],[],[]];
var images = ["map","photo","clock","ipod","tools","browser","weather","graph"];

function onClick(e)
{
  document.body.removeChild(this);
  cells[this.col][this.row] = null;
  fillCells();
}

function addCell(col, extra)
{
  var obj = document.createElement("img");
  obj.index = Math.floor(Math.random()*8);
  obj.src = "images/"+images[obj.index]+"_40.png";
  obj.style.position = "absolute";
  obj.style.left = (320-iconSize*cols)/2+iconSize*col+"px";
  obj.style.top = (-iconSize*extra)+"px";
  document.body.appendChild(obj);
  obj.onclick = onClick;
  obj.col = col;
  return obj;
}

function fillCells()
{
  anime.pause(true);
  for (var col=0; col<cols; col++) {
    var extra = 0;
    for (var row=0; row<rows; row++) {
      if (!cells[col][row]) {
         var obj = null;
         for (k=row+1; k<rows; k++) {
            if (obj = cells[col][k]) {
               cells[col][k] = null;
               break;
            }
         }
         if (!obj) {
            obj = addCell(col,++extra);
         }
         obj.row = row;
         cells[col][row] = obj;
         var top = 340-(row+1)*iconSize;
         var msec = Math.sqrt(top - obj.offsetTop)*100;
         anime.add({ element:obj, effect:'bounce', y:top, duration:msec });
      }
    }
  }
  anime.pause(false);
}

iAnime.effects.bounce = function(e,t,x,y) {
    this.move(e,t,x,y);
};

iAnime.effects.bounce.ratio = function(t) {
   return (t<0.6) ? ((t*t)/0.6) : (0.90+2.5*(t-0.8)*(t-0.8));
} 
  </script>
</head>
<body onload="fillCells()"></body>
</html>
